<template>
  <div class="login">
    <div class="item">
      <div class="login-title">
      </div>
    </div>
    <div class="item user">
      <div class="form">
        <div class="title">欢迎登录</div>
        <el-form :model="form" ref="ruleForm">
          <el-form-item
            prop="account"
            :rules="{ required: true, message: '必填' }"
          >
            <span><i class="el-icon-user"></i></span>
            <el-input v-model="form.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password" :rules="{ required: true, message: '必填' }">
            <span><i class="el-icon-lock"></i></span>
            <el-input
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <div>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <el-button class="btn" @click="login()" :loading="loading">{{loginText}}</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:false,
      checked: false,
      form: {},
      loginText:'登 录'
    };
  },
  methods: {
    //登录
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading=true
          this.$apis.baseData.login(this.form).then((res) => {
            this.loading=false
            if(!res.data.id){
              this.$message({
                type: "error",
                message: res.data.result,
              });
              return
            }
            if(!res.data.menus){
              this.$message({
                type: "error",
                message: '此账号未配置菜单权限，请配置！',
              });
              return
            }
            this.loginText='登录成功'
            this.$message({
              type: "success",
              message: "登录成功!",
            });
            //保存用户登陆信息
            this.$store.commit('set_useInfo', res.data)
            // localStorage.setItem("localStorageUser",JSON.stringify(res.data))
            sessionStorage.setItem("sessionStorageUser",JSON.stringify(res.data))
            this.$router.push("/");
            //是否记住用户
            if (this.checked) {
              // localStorage.setItem("loginname",JSON.stringify({ account: this.form.account, password: this.form.password }));
              sessionStorage.setItem("loginname",JSON.stringify({ account: this.form.account, password: this.form.password }));
            } else {
              // localStorage.setItem("loginname",null);
              sessionStorage.setItem("loginname",null);
            }
          }).catch(res=>{
            this.loading=false
            this.$notify.error({
              title: '错误',
              message: '服务器异常'
            });
          })
        }
      });
    },
    enterKey(event) {
      if (event.keyCode == 13) {
        this.login();
      }
    },
  },
  mounted() {
    // var loginname = JSON.parse(localStorage.getItem("loginname"));
    var loginname = JSON.parse(sessionStorage.getItem("loginname"));
    if (loginname && loginname.account) {
      this.checked = true;
      this.form = loginname;
    }
    document.addEventListener("keyup", this.enterKey);
  },
  beforeDestroy(){
    this.loading=false
    document.removeEventListener("keyup", this.enterKey);
  }
};
</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
  display: flex;
  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .logo {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 70%;
    }
    .cloud {
      height: 460px;
    }
  }
  .user {
    .form {
      margin: auto 0;
      background: #ffffff;
      width: 420px;
      padding-bottom: 20px;
      border-radius: 5px;
      .title {
        height: 76px;
        line-height: 76px;
        font-weight: bold;
        text-align: center;
        font-size: 22px;
      }
      .el-form {
        padding: 10px 46px;
        ::v-deep .el-form-item__content {
          display: flex;
          border-bottom: 1px solid #999999;
          span {
            display: inline-block;
            text-align: center;
            border-radius: 4px 0 0 4px;
            margin-right: 10px;
            height: 38px;
            line-height: 38px;
            font-size: 20px;
          }
          .el-input__inner {
            height: 38px;
            line-height: 38px;
            border-radius: 0 4px 4px 0;
            border: none;
            font-size: 18px;
          }
          .el-form-item__error{
            margin-top: 4px;
          }
        }
        .btn {
          margin-top: 18px;
          width: 100%;
          height: 38px;
          border-radius: 6px;
          font-size: 18px;
          background: #2269DB;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
